<template>
  <q-page class="q-pa-md">
    <div ref="iframeContainergas"></div>
  </q-page>
</template>

<script>
export default {
  name: 'gasMap',
  methods: {
    loadIframe() {
      const iframe = document.createElement('iframe');
      iframe.style.width = "100%";
      iframe.style.height = "1400px"; // 根据需要调整高度
      iframe.style.border = "none";
      const alertInfo = localStorage.getItem('alertInfo');
      console.log('从localStorage获取的数据:', alertInfo); // 调试输出
      
      // 检查数据格式是否正确
      let formattedInfo;
      try {
        formattedInfo = alertInfo ? encodeURIComponent(alertInfo) : encodeURIComponent('[{"所属光缆":"110KV东孚变~220KV新店LNG电厂"}]');
        console.log('格式化后的数据:', formattedInfo); // 调试输出
      } catch(e) {
        console.error('数据格式化错误:', e);
        formattedInfo = encodeURIComponent('[{"所属光缆":"110KV东孚变~220KV新店LNG电厂"}]');
      }

      iframe.src = `http://47.97.1.168:18888/?alertInfo=${formattedInfo}`;
      console.log('iframe URL:', iframe.src); // 调试输出
      this.$refs.iframeContainergas.appendChild(iframe);
    }
  },
  mounted() {
    this.loadIframe();
  }
}
</script>
